// 头部已经调用了拿列表的方法，所以不需要在mounted中调用

import React, { Component } from 'react'
import { connect } from 'dva'
import { Card } from 'antd'

import PageHeaderLayout from '../../components/Layouts/PageHeaderLayout'
import {MyTable, MyModal} from '../../common'

@connect(({loading, warehouse}) => ({
  list: warehouse.list,
  total: warehouse.total,
  listLoading: loading.effects['warehouse/list'],
  loading: loading.models.warehouse
}))
export default class Warehouse extends Component {
  constructor(props) {
    super(props)
    this.state = {
      visible: false
    }
  }

  onEdit = (record) => {
    console.log(record)
  }

  onAdd = () => {
    this.setState({
      visible: true
    })
  }

  onRemove = (record) => {
    const {dispatch} = this.props
    dispatch({
      type: 'warehouse/remove',
      payload: record.id
    })
  }

  render() {
    const {loading, list, total} = this.props
    const {visible} = this.state
    const columns = [{
      title: '编号',
      dataIndex: 'id',
    }, {
      title: '仓库名称',
      dataIndex: 'name',
    }, {
      title: '仓库地址',
      dataIndex: 'address',
    }, {
      title: '仓库类型',
      dataIndex: 'type',
      render: (text) => ['自营', '联营', '授权'][text] || '其他',
    }, {
      title: '是否禁用',
      dataIndex: 'status',
      render: (text) => (text ? '禁用' : '启用')
    }, {
      title: '联系人',
      dataIndex: 'contact'
    }, {
      title: '电话',
      dataIndex: 'phone'
    }]
    const data = [
      {label: '仓库名', key: 'name'},
      {label: '类型', key: 'type'},
      {label: '联系人', key: 'contact'},
      {label: '联系电话', key: 'phone'},
      {label: '地址', key: 'address'},
      {label: '时间', key: 'time'},
      {label: '面积', key: 'area'}
    ]
    return (
      <PageHeaderLayout
        title='仓库管理'
      >
        <Card loading={loading}>
          <MyTable
            dataSource={list}
            columns={columns}
            total={total}
            onAdd={this.onAdd}
            onEdit={this.onEdit}
            onRemove={this.onRemove}
          />
        </Card>
        <MyModal
          data={data}
          visible={visible}
          onCancel={() => this.setState({visible: false})}
        />
      </PageHeaderLayout>
    )
  }
}
